<template>
  <div class="lookInfo-container view-container">
    <modules-title title-name="立项尽调">
      <template slot="btn">
        <el-button
          type="primary"
          size="mini"
          @click="createModel"
        >添加</el-button>
      </template>
    </modules-title>
    <div class="main-content-container" style="padding:20px;">
      <div class="list-container">
        <el-table :data="listData" size="medium" border style="width: 100%">
          <el-table-column prop="department_name" label="部门名称" align="center" width="180" />
          <el-table-column prop="creator_name" label="创建者" align="center" width="180" />
          <el-table-column prop="created_at" label="创建时间" align="center" width="180" />
          <el-table-column label="内容" align="left" header-align="center">
            <template slot-scope="scope">
              <div class="content-container">
                <el-tag
                  v-for="(tag,idx) in scope.row.tem_content.label_info"
                  :key="idx"
                  type="info"
                  size="medium"
                  effect="plain"
                >{{ tag.label_key }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="left" header-align="center" width="180">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="meduim"
                @click="editItem(scope.row)"
              >编辑</el-button>
              <el-button
                class="text-btn-red"
                type="text"
                size="meduim"
                @click="deleteItem(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          style="display:flex;justify-content:flex-end;"
          :total="total"
          :page.sync="queryParams.pager.skip"
          :limit.sync="queryParams.pager.limit"
          @pagination="afreshList"
        />
      </div>
    </div>
    <create-dialog
      :id="currentId"
      ref="createDialog"
      :list-department-id="listDepartmentId"
      @createSuccess="createSuccess"
      @closeSuccess="closeSuccess"
    />
  </div>
</template>

<script>
import { lookInfoModelList, lookInfoModelDelete } from '@/api/lookInfoModel'
export default {
  components: {
    CreateDialog: () => import('../modules/createDialog')
  },
  data() {
    return {
      total: 0,
      listData: [],
      listDepartmentId: [],
      // 查询参数
      queryParams: {
        pager: {
          limit: 20,
          skip: 0,
          order_by: '',
          OrderMethod: -1
        }
      },
      currentId: '',
      detailsData: null
    }
  },
  // 返回后是否刷新列表
  beforeRouteEnter(to, from, next) {
    console.log(to, from, next)
    to.params.refresh = from.params.refresh

    next()
  },
  activated: function() {
    if (this.$route.params.refresh) {
      this.getLookInfoModelList()
    }
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getLookInfoModelList()
  },
  methods: {
    createModel() {
      this.$refs.createDialog.open()
    },
    createSuccess() {
      this.getLookInfoModelList()
    },
    closeSuccess() {
      this.currentId = ''
    },
    afreshList() {
      this.getLookInfoModelList()
    },
    getLookInfoModelList() {
      this.listDepartmentId = []
      lookInfoModelList(this.queryParams).then(res => {
        if (res.code === 200) {
          this.listData = res.data.data || []
          this.total = res.data.total
          this.listData.forEach(item => {
            this.listDepartmentId.push(item.department_id)
          })
        }
      })
    },

    deleteItem(row) {
      const that = this
      const datas = {
        id: row.id
      }
      this.$confirm(
        '是否确认删除该尽调模板?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(function() {
          lookInfoModelDelete(datas).then(res => {
            if (res.code === 200) {
              that.getLookInfoModelList()
            }
          })
        })
    },
    editItem(row) {
      const that = this
      this.currentId = row.id
      this.$nextTick(() => {
        that.$refs.createDialog.open()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.lookInfo-container {
  padding-top: 60px;
}
.content-container {
  .el-tag {
    margin: 5px;
  }
}
</style>
